<template>
	<div>
		<van-tabs v-model="active" line-width="90px" color="#FB7299">
			<van-tab title="相关推荐">
				<div class="detailparents"><detail class="detailitem" @videoClick="onVideoClick" v-for="item in commendlist" :key="item.id" :detailitem="item"></detail></div>
			</van-tab>
			<van-tab :title="`评论 ${lens}`">
				<comment :datalength="lens" @postcomment="postsuccess" ref="commentIpt"></comment>
				<div>
					<!-- 顶级回复和二级回复的 clcik 事件 -->
					<comments @lengthselect="len => (lens = len)" @publishclick="postchildclick" ref="commentpublish"></comments>
				</div>
			</van-tab>
		</van-tabs>
	</div>
</template>

<script>
import comment from './comment.vue';
import comments from './comments.vue';
import detail from '../../views/Detail.vue';
export default {
	data() {
		return {
			active: 0,
			commendContent: '',
			comment_count: 0,
			postcom: {
				comment_content: '',
				comment_date: '',
				parent_id: null,
				article_id: null
			},
			lens: 0
		};
	},
	components: {
		// VideoItem,
		// CommentList,
		comment,
		comments,
		detail
	},
	props: ['commendlist', 'userInfo'],
	methods: {
		// 点击回复时，自动聚焦到input框
		postchildclick(id) {
			console.log(id);
			// 先到赋值parent_id，再聚焦
			this.postcom.parent_id = id;
			this.$refs.commentIpt.focusIpt();
		},
		// 发表评论
		async postsuccess(res) {
			console.log(res);
			const date = new Date();
			let m = date.getMonth() + 1;
			let d = date.getDate();
			if (m < 10) {
				m = '0' + m;
			}
			if (d < 10) {
				d = '0' + d;
			}
			let str = `${m}-${d}`;
			console.log(str);
			this.postcom.comment_content = res;
			this.postcom.comment_date = str;
			this.postcom.article_id = this.$route.params.id;
			// console.log(this.postcom)
			const result = await this.$http.post('/comment_post/' + localStorage.getItem('id'), this.postcom);
			// console.log(result)
			this.$refs.commentpublish.commentData();
			this.postcom.parent_id = null;
			if (result.status == 200) {
				this.$msg('发表成功');
			}
		},
		onReplyClick(parent_id) {
			console.log(parent_id);
			this.$refs.inputEl.focus();
			this.commentModel.parent_id = parent_id;
		},
		commentLength(length) {
			this.comment_count = length;
		},
		onVideoClick(videoId) {
			// 视频详情页,created来发ajax, 当地址改变时, 任然是同一页面, 不会再发ajax更新内容
			if (this.$route.params.id == videoId) {
				return;
			}
			this.$router.push('/videoDetail/' + videoId);
		},
		async submit() {
			if (!this.userInfo) {
				this.$toast.fail('请先登录');
				return;
			}
			// 正则校验 TODO
			if (!/^.{2,50}$/.test(this.commendContent)) {
				console.log('校验失败');
				this.$toast.fail('至少两个字');
				return;
			}

			this.commentModel.comment_content = this.commendContent;
			this.commentModel.comment_date = dayjs().format('MM-DD');
			this.commentModel.article_id = this.$route.params.id;

			console.log(this.commentModel);
			const res = await this.$http.post('/comment_post/' + localStorage.getItem('id'), this.commentModel);
			console.log(res);
			if (!res.data.code) {
				this.$toast.success('发表成功');

				// 刷新评论
				this.$refs.commentList.getCommentData();

				this.commendContent = '';
			} else {
				this.$toast.fail(res.data.msg);
			}
			this.parent_id = null;
		},
		onInputFocus() {
			if (!this.userInfo) {
				this.$toast.fail('请先登录');
				return;
			}
		}
	}
};
</script>

<style lang="less" scoped>
.video-item-wrapper {
	margin-top: 0.833vw;
	display: flex;
	flex-wrap: wrap;
}
.commend-wrapper {
	margin-top: 4.167vw;
	padding: 0 4.167vw 2.778vw 4.167vw;
	.user-input {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		img {
			width: 8.333vw;
			height: 8.333vw;
			border-radius: 50%;
			vertical-align: middle;
			margin-right: 2.778vw;
		}
		input {
			flex: 1;
			border: none;
			outline: none;
			line-height: 7.222vw;
			border-radius: 4.167vw;
			padding: 0.278vw 2.778vw;
			background: #f4f4f4;
			box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
			margin-right: 2.778vw;
		}
		span {
			background: #fb7299;
			line-height: 7.222vw;
			padding: 0.556vw 2.778vw 0 2.778vw;
			height: 7.222vw;
			border-radius: 3.611vw;
			color: white;
		}
	}
}
.detailparents {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	.detailitem {
		width: 45%;
		margin: 5px 0;
	}
}
</style>
